import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createAddPersonAction} from '../../redux/actions/person'

class Person extends Component {
  addPerson = ()=>{
    const personObj = {id:nanoid(),name:this.nameNode.value, age:this.ageNode.value}
    this.props.addPerson(personObj)
    this.nameNode.value = this.ageNode.value = ''
  }
  render() {
    return (
      <div>
        <h1>当前求和为：{this.props.count}</h1>
        <input ref={c=>this.nameNode=c} type="text" placeholder="姓名"/>&nbsp;
        <input ref={c=>this.ageNode=c} type="text" placeholder="年龄"/>&nbsp;
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.persons.map(item=>{
              return <li key={item.id}>{item.name}----{item.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

export default connect(
  state => ({persons:state.person, count:state.count}),
  {
    addPerson: createAddPersonAction
  }
)(Person)
